<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('发送打分')" />
    <style>
        body.gray-bg{
            background-color: #ccc;
        }
        .main-ctn{
            padding: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .part-ctn{
            background: #fff;
            border-radius: 5px;
            margin-top: 10px;
            padding: 10px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        }

        .match-ctn{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-ctn{
            display: grid;
            align-items: center;
            grid-template-columns: auto 160px 60px 60px;
            grid-column-gap: 10px;
        }

        .search-ctn form{
            display: grid;
            grid-template-columns: 80px 80px;
            grid-column-gap: 10px;
        }

        .judge-ctn{
            display: flex;
            justify-content: center;
        }
        .judge-ctn .judge{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            border-left: 1px solid #ccc;
            height: 36px;
        }
        .judge:last-child{
            border-right: 1px solid #ccc;
        }
        .judge .name{
            font-weight: bold;
        }

        .tool-ctn .btn{
            margin-right: 10px;
        }

        .register-ctn{
            flex: 1;
            overflow-y: auto;
        }

        .session{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            /*grid-column-gap: 5px;*/
            grid-row-gap: 10px;
            border-bottom: 1px dashed #ccc;
            padding: 5px 0;
        }
        .register{
            cursor: pointer;
            border-radius: 4px;
            padding: 4px;
            white-space: nowrap;
        }
        .register:hover{
            background: #23c6c8;
            color: #fff;
            opacity: .6;
        }
        .register.active{
            background: #23c6c8;
            color: #fff;
        }
        .register .fa-check{
            display: none;
        }
        .register.scored .fa-check{
            display: inline-block;
        }

        .pwd-ctn{
            display: grid;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

    </style>
</head>
<body class="gray-bg">
     <div class="main-ctn">

        <div class="part-ctn match-ctn">
            <div class="match-name">[[${match.name}]]</div>
            <a class="btn btn-xs btn-primary" onclick="refreshPage()"><i class="fa fa-refresh"></i> 刷新</a>
        </div>

        <div class="part-ctn search-ctn">
            <form>
                <select id="select2_place" class="form-control" onchange="refreshRegisterList()">
                    <option th:each="place : ${placeList}" th:text="${place.name}" th:value="${place.id}"></option>
                </select>
            </form>

            <input class="form-control" type="text" autocomplete="off" name="playerName" placeholder="选手"/>

            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchPlayer()"><i class="fa fa-search"></i>&nbsp;搜索</a>
            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetSearch()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
        </div>

         <div class="part-ctn judge-ctn"></div>

        <div class="part-ctn tool-ctn">
            <a class="btn btn-sm btn-info" onclick="nextRegister()"><i class="fa fa-step-forward"></i> 下一个</a>
            <a class="btn btn-sm btn-primary" onclick="sendToScore()"><i class="fa fa-step-forward"></i> 发送打分</a>
            <a class="btn btn-sm btn-warning" onclick="sendToScreenScore()"><i class="fa fa-tc"></i> 投屏成绩</a>
            <a class="btn btn-sm btn-warning" onclick="sendToScreenScore2()"><i class="fa fa-tc"></i> 投屏成绩2</a>
        </div>

        <div class="part-ctn register-ctn">
            <div class="register-list">

            </div>
        </div>

    </div>

     <!--<div class="pwd-ctn">-->
         <!--<input onkeyup="pwdChange()" class="form-control" type="password" name="pwd" autocomplete="off" placeholder="密码"/>-->
     <!--</div>-->

    <th:block th:include="include :: footer" />

    <script id="tmpl_register" type="text/template">
        <div class="session">
            {{each(i, v) registerList}}
            <div onclick="clickRegister(this)" class="register ${v.isScored ? 'scored' : ''}" data-register-id="${v.id}" data-register-player-name="${v.playerName}">
                ${v.odr}${v.playerName}<i class="fa fa-check"></i>
            </div>
            {{/each}}
        </div>
    </script>

     <script id="tmpl_judge" type="text/template">
         {{each(i, v) judgeList}}
         <div class="judge">
             <div class="name">${v.name}</div>
             <div class="score">${v.score ? v.score.toFixed(1) : ''}</div>
         </div>
         {{/each}}
     </script>

    <script th:inline="javascript">
        var key = "greejoy";
        var prefix = ctx + "js/app";
        var wsUrl = [[${wsUrl}]];
        var _registerId;

        function pwdChange(){
            var pwd = $("input[name='pwd']").val();
            if(pwd == "123456"){
                $(".main-ctn").removeClass("hide");
                $(".pwd-ctn").addClass("hide");
            }
        }

        function refreshPage() {
            window.location.reload(true);
        }

        function searchPlayer(){
            var name = $("input[name='playerName']").val();
            $(".register-list .register").addClass("hide");
            $(".register-list .register").each(function (index, item) {
                var playerName = $(item).attr("data-register-player-name");
                if(playerName.indexOf(name) >= 0){
                    $(item).removeClass("hide");
                }
            });
        }

        function resetSearch(){
            $("input[name='playerName']").val("");
            $(".register-list .register").removeClass("hide");
        }


        refreshRegisterList();

        function refreshRegisterList(){
            var placeId = $("#select2_place").val();
            $.get(prefix + "/getRegisterList", {key, placeId}, function (res) {
                $(".register-list").empty();
                if(res.data){
                    for(var registerList of res.data){
                        $("#tmpl_register").tmpl({registerList}).appendTo(".register-list");
                    }
                    if(_registerId){
                        $(".register-list .register").removeClass("active");
                        $(".register-list .register[data-register-id='" + _registerId + "']").addClass("active");
                    }else{
                        nextRegister();
                    }
                }else {
                    $(".register-list").text("没有报名信息");
                }

            });
        }

        function refreshRegisterScore(){
            if(_registerId){
                $.get(prefix + "/getRegisterScore", {key, registerId: _registerId}, function (res) {
                    $(".judge-ctn").empty();
                    if(res.data) {
                        $("#tmpl_judge").tmpl({judgeList: res.data}).appendTo(".judge-ctn");
                    }
                });
            }
        }

        function clickRegister(evt){
            $(".register-list .register").removeClass("active");
            $(evt).addClass("active");
            var $register = $(".register-list .register.active");
            _registerId = $register.attr("data-register-id");
            refreshRegisterScore();
        }

        function nextRegister() {

            var $next;
            var $register = $(".register-list .register.active");
            if($register.length > 0){
                $next = $register.next(".register");
                if($next.length == 0){
                    var $session = $register.closest(".session");
                    var $nextSession = $session.next(".session");
                    if($nextSession.length > 0){
                        $next = $nextSession.find(".register").first();
                    }else {
                        $.modal.msg("没有下一个了");
                    }
                }
            }else {
                $next = $(".register-list .register").first();
            }

            if($next.length > 0){
                $(".register-list .register").removeClass("active");
                $next.addClass("active");

                var offsetTop = $next[0].offsetTop;
                var parentHeight = $(".register-ctn").height();

                if(offsetTop >= parentHeight){
                    $(".register-ctn").animate({
                        scrollTop: offsetTop - (parentHeight / 2)
                    }, 200);
                }else {
                    $(".register-ctn").scrollTop(0);
                }

            }

            var $register = $(".register-list .register.active");
            _registerId = $register.attr("data-register-id");
            refreshRegisterScore();
        }


        function sendToScore() {
            var $register = $(".register-list .register.active");
            var registerId = $register.attr("data-register-id");
            if(!registerId){
                $.modal.alertWarning("未选择发送的选手");
                return;
            }
            $.get(prefix + "/sendToScore", { key, registerId}, function (result) {
                if (result.code == web_status.SUCCESS) {
                    $(".register-list .register[data-register-id='"+registerId+"']").removeClass("scored");
                    $.modal.msg("发送成功");
                } else {
                    $.modal.alertWarning("发送失败");
                }
            });
        }

        function sendToScreenScore() {
            var $register = $(".register-list .register.active");
            var registerId = $register.attr("data-register-id");
            $.get(prefix + "/sendToScreenScore", { key, registerId}, function (result) {
                if (result.code == web_status.SUCCESS) {
                    $.modal.msg("发送成功");
                } else {
                    $.modal.alertWarning("发送失败");
                }
            });
        }

        function sendToScreenScore2() {
            var $register = $(".register-list .register.active");
            var registerId = $register.attr("data-register-id");
            $.get(prefix + "/sendToScreenScore2", { key, registerId}, function (result) {
                if (result.code == web_status.SUCCESS) {
                    $.modal.msg("发送成功");
                } else {
                    $.modal.alertWarning("发送失败");
                }
            });
        }


        socket();
        function socket() {

            if (window.WebSocket && window.MozWebSocket) {
                console.log("浏览器不支持websocket");
            }

            var ws = new WebSocket(wsUrl);

            // 收到消息后触发
            ws.onmessage = function (msg) {
                // 服务器连接后默认发送pong字符串
                if(msg.data == "pong"){
                    return;
                }
                var data = JSON.parse(msg.data);
                switch (data.type) {
                    case "refreshScore":
                        refreshRegisterScore();
                        break;
                    case "finishScore":
                        var registerId = data.registerId;
                        $(".register-list .register[data-register-id='"+registerId+"']").addClass("scored");
                        break;
                    case "refreshRegisterList":
                        refreshRegisterList();
                        break;

                }
            };

            //建立连接后触发
            ws.onopen = function () {
                console.log("ws连接成功");
            };

            // 关闭连接时候触发
            ws.onclose = function () {
                reconnect();
            };

            //发生错误的时候触发
            ws.onerror = function () {
                reconnect();
            };
        }

        // 每隔5秒重连
        var lock = false;
        function reconnect() {
            if (lock) return;
            lock = true;
            setTimeout(function () {
                socket();
                lock = false;
            }, 5 * 1000);
        }

    </script>
</body>
</html>